* {
  margin: 0px;
  padding: 0px;
}
body {
  background-color: bisque;
}
.nine-box {
  width: 186px;
  height: 186px;
  background-color: orchid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #ffffff;
}
.nine-box div {
  width: 60px;
  height: 60px;
  margin: 1px;
  line-height: 60px;
  text-align: center;
}
.nine-box div:nth-child(1) {
  background-color: #5e3414;
}
.nine-box div:nth-child(2) {
  background-color: #1ba124;
}
.nine-box div:nth-child(3) {
  background-color: #a08d20;
}
.nine-box div:nth-child(4) {
  background-color: #a52062;
}
.nine-box div:nth-child(5) {
  background-color: #d40e0e;
}
.nine-box div:nth-child(6) {
  background-color: #2424b3;
}
.nine-box div:nth-child(7) {
  background-color: #0e0707;
}
.nine-box div:nth-child(8) {
  background-color: #7b8f33;
}
.nine-box div:nth-child(9) {
  background-color: #6810b1;
}
.face-container h2,
.face-container h3,
.face-container h4,
.face-container h5,
.face-container h6,
.face-container span {
  text-align: center;
  margin: 16px;
}
.face-container [class$='face'] {
  display: flex;
  width: 104px;
  height: 104px;
  margin: 16px;
  padding: 4px;
  background-color: #e7e7e7;
  object-fit: contain;
  box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
  border-radius: 10%;
}
.face-container [class$='face'] .column {
  display: flex;
}
.face-container [class$='face'] .pip {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 4px;
  background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
